<template>
    <div class="main-my-index">
        <section>
            <van-cell :center="true" title-class="title" :border="false" class="cell" icon="location-o" :to="{name: item.name}" v-for="(item,index) in items" :key="index" >
                <template #icon><van-icon :name="item.icon" size="28" color="#FF5E00" /></template>
                <template #title><span class="text">{{item.title}}</span></template>
            </van-cell>
        </section>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch  } from 'vue'

const items = reactive<Array<{title: string, icon: string, name : string}>>([
    {
        title: 'Profile',
        icon: 'manager',
        name: 'MyProfile'
    },
    {
        title: 'Orders',
        icon: 'balance-list',
        name: 'MyOrders'
    },
    {
        title: 'Address',
        icon: 'map-marked',
        name: 'MyAddress'
    },
    {
        title: 'Payment',
        icon: 'card',
        name: 'CartPayment'
    }
])

</script>

<style lang="less" scoped>
.main-my-index {
    section {
        padding: 30px 0px;
        .cell {
            padding: 20px 16px;
            .title {
                .text {
                    line-height: 28px;
                    margin-left: 16px;
                    font-weight: bold;
                    font-size: 18px;
                    letter-spacing: 0.005em;
                    color: #6D3805;
                }
            }
        }
    }
}
</style>
